<template>
  <div class="box">
    <div v-if="proDetailData.type" class="pro_box">
      <div class="pro_pic">
        <img :src="proDetailData.pro_pic" alt="">
        <span @click="goBack">
          <van-icon name="arrow-left" />
        </span>
        <span @click="collectPro">
          <van-icon v-if="collectProShowBool" name="star-o" />
          <van-icon v-else style="{ 'color: '#ff5959 }" name="star" />
        </span>
      </div>
      <div class="pro_pro">
        <p class="pro_price">
          <b>￥</b>
          <span>{{proDetailData.pro_price}}</span>
        </p>
        <p class="pro_introduce">{{proDetailData.pro_introduce}}</p>
        <p class="pro_city">
          <span>{{proDetailData.pro_city}}</span>
          <span>{{'已预约' + proDetailData.subscribe}}</span>
        </p>
        <div class="clinic">
          <img :src="proDetailData.clinic_pic" alt="">
          <div class="clinic_text">
            <p>{{proDetailData.clinic_name}}</p>
            <span>{{'地址：' + proDetailData.clinic_address}}</span>
            <div class="clinic_serviceName">
              <div>
                <van-icon name="phone-o" />
                <b @click="changeShowBool">电话咨询</b>
              </div>
              <span>|</span>
              <div>
                <van-icon name="chat-o" />
                <b @click="serve(proDetailData.proid)">在线客服</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <recommend />
      <div class="pro_buy">
        <div>
          <span>{{'￥' + proDetailData.pro_price}}</span>
          <span @click="goOrder(proDetailData.proid)">立即购买</span>
        </div>
        <img @click="chat" src="@/assets/images/icon_kefu.png" alt="">
      </div>
    </div>
    <Loading v-else />
    <van-popup v-model="show" round>
      <div class="copyTel" data-clipboard-target=".copyTel" @click="copy">
        <span>{{proDetailData.clinic_tel}}</span>
        <span>复制</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Loading from '../../components/loading'
import { getProductById, getCollectPro } from '../../api'
import Recommend from './recommend.vue'
import Clipboard from 'clipboard'
import Vue from 'vue'
import { Icon, Toast, Popup } from 'vant'
Vue.use(Icon)
Vue.use(Toast)
Vue.use(Popup)
export default {
  data () {
    return {
      show: false,
      proid: '',
      proDetailData: [],
      preferentialPrice: 0,
      collectProShowBool: true,
      loginState: localStorage.getItem('loginState_AM')
    }
  },
  components: {
    Recommend,
    Loading
  },
  mounted () {
    this.proid = this.$route.query.proid
    this.getProDetail(this.proid)
  },
  methods: {
    serve (id) {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        this.$router.push('/login')
      } else {
        this.$router.push({ path: '/communication/' + 'servicerid=' + id })
      }
    },
    changeShowBool () {
      this.show = true
    },
    copy () {
      var clipboard = new Clipboard('.copyTel')
      clipboard.on('success', e => {
        // console.log('复制成功', e)
        Toast({
          message: '复制成功'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        Toast({
          message: '手机权限不支持复制功能'
        })
        // console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 官方客服
    chat () {
      window._MEIQIA('withoutBtn')
      window._MEIQIA('init')
      window._MEIQIA('allSet', function () {
        window._MEIQIA('showPanel')
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    collectPro () {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        this.$router.push('/login')
      } else {
        if (this.collectProShowBool) {
          getCollectPro({
            username: localStorage.getItem('userTel_AM'),
            pro_id: this.proid,
            collect: 1
          }).then(res => {
            if (res.data.code === '200') {
              this.collectProShowBool = false
              Toast('您已收藏成功')
            }
          })
        } else {
          getCollectPro({
            username: localStorage.getItem('userTel_AM'),
            pro_id: this.proid,
            collect: 0
          }).then(res => {
            if (res.data.code === '200') {
              this.collectProShowBool = true
              Toast('您已取消收藏')
            }
          })
        }
      }
    },
    getProDetail (proid) {
      getProductById({
        proid: proid,
        username: localStorage.getItem('userTel_AM') ? localStorage.getItem('userTel_AM') : '11000000000'
      }).then(res => {
        if (res.data.code === '200') {
          this.proDetailData = res.data.data[0]
          // console.log(this.proDetailData)
          if (this.proDetailData.iscollect === 1) {
            this.collectProShowBool = false
          }
        }
      })
    },
    goOrder (id) {
      if (this.loginState === 'no' || this.loginState === null) {
        Toast('您还没有登录，快去登录吧')
        this.$router.push('/login')
      } else {
        const proid = id.toString()
        this.$router.push({ path: '/order', query: { proid: proid, preferentialPrice: this.preferentialPrice } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pro_box {
  width: 100%;
  height: auto;
  .pro_pic {
    position: relative;
    img {
      width: 100%;
    }
    span {
      display: block;
      width: 0.3rem;
      height: 0.3rem;
      background: rgba(255,255,255,.6);
      border-radius: 50%;
      text-align: center;
      .van-icon-arrow-left {
        font-size: 0.24rem;
        color: white;
        line-height: 0.3rem;
      }
      .van-icon-star-o {
        font-size: 0.24rem;
        color: white;
        line-height: 0.3rem;
      }
      .van-icon-star {
        font-size: 0.24rem;
        color: #ff5959;
        line-height: 0.3rem;
      }
    }
    span:nth-of-type(1) {
      position: absolute;
      top: 0.15rem;
      left: 0.15rem;
    }
    span:nth-of-type(2) {
      position: absolute;
      top: 0.15rem;
      right: 0.15rem;
    }
  }
  .pro_pro {
    width: 100%;
    height: auto;
    padding: 0 0.15rem;
    .pro_price {
      width: 100%;
      height: 0.16rem;
      margin-top: 0.2rem;
      color: #FF5959;
      margin-bottom: 0.1rem;
      b {
        font-weight: normal;
        font-size: 0.12rem;
      }
      span {
        font-size: 0.16rem;
        line-height: 0.16rem;
        font-weight: bold;
      }
    }
    .pro_introduce {
      width: 100%;
      height: 0.4rem;
      line-height: 0.2rem;
      font-size: 0.16rem;
      color: #666666;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 0.1rem;
    }
    .pro_city {
      width: 100%;
      height: 0.12rem;
      line-height: 0.12rem;
      font-size: 0.12rem;
      color: #999999;
      margin-bottom: 0.2rem;
      span:nth-of-type(1) {
        float: left;
      }
      span:nth-of-type(2) {
        float: right;
      }
    }
    .clinic {
      width: 100%;
      height: 1.14rem;
      background:rgba(255,248,248,1);
      box-shadow:0rem 0.06rem 0.1rem 0rem rgba(97,97,97,0.2);
      border-radius: 0.05rem;
      padding: 0.17rem 0.1rem;
      img {
        width: 0.8rem;
        height: 0.8rem;
        float: left;
        margin-right: 0.2rem;
        border-radius: 50%;
      }
      .clinic_text {
        width: 2.25rem;
        height: 100%;
        float: left;
        p {
          width: 100%;
          height: 0.16rem;
          line-height: 0.16rem;
          margin-top: 0.1rem;
          text-align: left;
          color:rgba(102,102,102,1);
          font-size: 0.14rem;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
        span {
          display: block;
          width: 100%;
          height: 0.12rem;
          line-height: 0.12rem;
          font-size: 0.12rem;
          color: #666666;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          margin-top: 0.1rem;
        }
        .clinic_serviceName {
          width: 100%;
          height: 0.18rem;
          margin-top: 0.16rem;
          div {
            width: 40%;
            float: left;
            height: 100%;
            line-height: 0.18rem;
            font-size: 0.14rem;
            color: #666666;
            .van-icon {
              font-size: 0.18rem;
              float: left;
            }
            b {
              font-weight: normal;
              margin-left: 0.04rem;
              float: left;
            }
          }
          div:nth-of-type(2) {
            margin-left: 0.1rem;
          }
          span {
            width: 2%;
            height: 100%;
            line-height: 0.18rem;
            float: left;
            margin-top: 0;
            color: #666666;
            font-size: 0.18rem;
          }
        }
      }
    }
  }
  .pro_buy {
    width: 100%;
    height: 0.5rem;
    padding: 0 0.15rem;
    position: fixed;
    bottom: 0;
    background: white;
    div {
      width: 2.3rem;
      height: 0.36rem;
      margin: 0.07rem 0;
      span {
        width: 50%;
        height: 100%;
        float: left;
        font-size: 0.18rem;
        line-height: 0.36rem;
        text-align: center;
      }
      span:nth-of-type(1) {
        background: #FFE7E8;
        border-radius: 0.18rem 0 0 0.18rem;
        color: #FF5959;
      }
      span:nth-of-type(2) {
        background: #FF5959;
        border-radius: 0 0.18rem 0.18rem 0;
        color: #FFFFFF;
      }
    }
    img {
      width: 0.55rem;
      height: 0.6rem;
      float: left;
      position: absolute;
      right: 0.25rem;
      bottom: 0.1rem;
    }
  }
}
.copyTel {
  width: 3.60rem;
  height: 0.88rem;
  border-radius: 10px!important;
  background: white;
  margin: auto;
  padding: 0.24rem 0.15rem;
  span:nth-of-type(1) {
    float: left;
    line-height: 0.4rem;
    width: 2.2rem;
    height: 0.4rem;
    font-size: 0.3rem;
    font-weight: bold;
    text-align: center;
    color: #5b5b5b;
  }
  span:nth-of-type(2) {
    float: right;
    width: 1rem;
    height: 0.4rem;
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.2rem;
    background: #04e5af;
    color: white;
    border-radius: 0.17rem;
  }
}
</style>
